<template>
  <view>
    <t-cell
      v-if="showCell"
      :title="title"
      arrow
      hover
      :note="labelModel"
      @click="onPicker"
    />

    <t-popup v-model="visibleModel" placement="bottom">
      <t-picker
        :value="valueModel"
        :columns="columns"
        :title="title"
        cancelBtn="取消"
        confirmBtn="确认"
        @change="onPickerChange"
        @cancel="onPickerCancel"
      >
        <!-- <t-picker-item :options="dangerTypeOptions" /> -->
      </t-picker>
    </t-popup>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { useVModel } from "@vueuse/core";
import { isBoolean } from "lodash-es";

const props = defineProps({
  showCell: {
    type: Boolean,
    default: true,
  },
  visible: {
    type: [String, Boolean],
    default: "",
  },
  value: {
    type: Array,
    default: [],
  },
  label: {
    type: String,
    default: "__默认__",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["update:visible", "update:value", "update:label"]);

const valueModel = useVModel(props, "value", emits);
const labelModel =
  props.label === "__默认__" ? ref("") : useVModel(props, "label", emits);

const visibleModel = isBoolean(props.visible)
  ? useVModel(props, "visible", emits)
  : ref(false);

const columns = ref([
  [
    { label: "一般隐患", value: 1 },
    { label: "重大隐患", value: 2 },
  ],
]);

const onPicker = () => {
  if (props.disabled) return;

  visibleModel.value = true;
};

function onPickerChange(e) {
  valueModel.value = e;
  const key = e[0];
  labelModel.value = columns.value[0].find((item) => item.value === key).label;
  visibleModel.value = false;
}

function onPickerCancel() {
  visibleModel.value = false;
}
</script>

<style lang="less" scoped></style>
